<!--
 * @Author: gaotang
 * @Date: 2025年01月03日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2025-01-03 18:54:52
-->
<template>
  <div v-if="pageflag">
    <div class="chart-container">
      <Echart id="charts_rlt" :options="optionsPie" class="left_center_inner" ref="charts" height="270px" />
      <!-- 底座背景 -->
      <div class="bg"></div>
    </div>
    <Echart :options="options" class="left_center_inner" ref="charts" height="260px" />
  </div>
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { getPie3D, getParametricEquation } from '@/utils/chart'; //工具类js，页面路径自己修改

export default {
  name: 'ACenterDialog',
  data() {
    return {
      options: {},
      optionsPie: {},
      countUserNumData: {
        axisData: [
          '临沂-青岛',
          '临沂-济南',
          '临沂-苏州',
          '临沂-杭州',
          '临沂-上海',
          '临沂-北京',
        ],
        seriesData: [35, 25, 80, 55, 40, 25],
        seriesData1: [35, 25, 10, 15, 30, 25],
        seriesDataBg: [30, 50, 10, 30, 30, 50],
      },
      optionData: [
        {
          name: '服装',
          value: 22,
          itemStyle: {
            color: '#25989D',
          },
        },

        {
          name: '建材',
          value: 36,
          itemStyle: {
            color: '#134C84',
          },
        },
        {
          name: '家电',
          value: 14,
          itemStyle: {
            color: '#EF8035',
          },
        },
        {
          name: '食品',
          value: 36,
          itemStyle: {
            color: '#9FD7F4',
          },
        },
        {
          name: '五金',
          value: 28,
          itemStyle: {
            color: '#F6CE62',
          },
        },
      ],
      pageflag: true,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      this.init(this.countUserNumData);
      this.initPie();
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on('mouseover', (params) => {
        this.clearData();
      });
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(
          looper,
          2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
        );
      });
    },
    init(currentData) {
      let axisData = currentData.axisData;
      let seriesData = [
        [...currentData.seriesData],
        [...currentData.seriesData1],
        [...currentData.seriesDataBg],
      ];
      const options = {
        title: {
          top: '0%',
          left: '8%',
          text: '大集11月份货物品类构成',
          textStyle: {
            color: '#fff', // 文字颜色
            fontSize: 14, // 文字大小
            fontWeight: 'normal', // 文字粗细
          },
          backgroundColor: colorsB[1], // 背景色
          borderRadius: 10, // 圆角
          padding: [8, 15], // 内边距 [上下, 左右]
        },
        grid: {
          top: '25%',
          left: '4%',
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        legend: {
          show: true,
          top: '12%',
          right: '9%',
          icon: 'rect',
          itemWidth: 12,
          itemHeight: 6,
          itemGap: 10,
          textStyle: legend.textStyle,
          data: ['票数', '重量', '体积'],
        },
        xAxis: {
          type: 'value', // 将 x 轴设置为数值轴
          // max: 8000,
          // min: 100,//
          // interval: 2000,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false, // 不显示下切线
          },
          axisLabel: xAxis.axisLabel,
          axisLine: {
            lineStyle: {
              background: 'rgba(176, 215, 255, 0.4)',
            },
          },
        },
        yAxis: {
          type: 'category',
          data: axisData,
          // boundaryGap: false,
          // boundaryGap: true,
          axisLabel: yAxis.axisLabel,
          axisLine: {
            show: false,
            // interval: 1,
            lineStyle: {
              color: 'rgba(0,0,0,0.5)',
            },
          },
          splitLine: {
            show: true,
            // interval: 1,
            lineStyle: {
              color: ['rgba(176, 215, 255, 0.2)'],
              width: 1,
              type: 'dashed',
            },
          },
          // splitLine: {
          //   show: false,
          // },
          axisTick: {
            show: false,
          },
        },
        series: [],
      };
      const series = [
        {
          name: '票数',
          stack: '总量', // 使用相同的 stack 名称将系列堆叠在一起
          type: 'bar',
          barWidth: 10,
          // 动画配置
          animation: true,
          animationDuration: 2000,
          animationEasing: 'quarticInOut',
          animationDelay: function (idx) {
            return idx * 150;
          },
          smooth: false,
          showSymbol: true,
          data: seriesData[0],
          itemStyle: {
            normal: {
              // color: "#38FFBA",
              // color: 'rgba(0,219,254, .7)',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#0E5FFF',
                  },
                  {
                    offset: 1,
                    color: '#03DFFC',
                  },
                ],
                globalCoord: false,
              }
            },
          },
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          label: {
            show: false,
          },
        },
        {
          name: '重量',
          type: 'bar',
          stack: '总量', // 使用相同的 stack 名称将系列堆叠在一起
          barWidth: 10,
          // 动画配置
          animation: true,
          animationDuration: 2000,
          animationEasing: 'quarticInOut',
          animationDelay: function (idx) {
            return idx * 150;
          },
          smooth: false,
          showSymbol: true,
          itemStyle: {
            normal: {
              // color: '#287CE8',
              // color: 'rgba(0,219,254, .7)',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#008366',
                  },
                  {
                    offset: 1,
                    color: '#00FFCE',
                  },
                ],
                globalCoord: false,
              }
            },
          },
          data: seriesData[1],
          lineStyle: {
            normal: {
              width: 2,
            },
          },
        },
        {
          name: '体积',
          type: 'bar',
          stack: '总量', // 使用相同的 stack 名称将系列堆叠在一起
          barWidth: 10,
          // 动画配置
          animation: true,
          animationDuration: 2000,
          animationEasing: 'quarticInOut',
          animationDelay: function (idx) {
            return idx * 150;
          },
          smooth: false,
          showSymbol: true,
          itemStyle: {
            normal: {
              // color: '#8579FC',
              // color: 'rgba(0,219,254, .7)',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#0933D1',
                  },
                  {
                    offset: 1,
                    color: '#00D0F2',
                  },
                ],
                globalCoord: false,
              }
            },
          },
          data: seriesData[2],
          lineStyle: {
            normal: {
              width: 2,
            },
          },
        },
      ];
      options.series = series;
      this.options = options;
    },
    initPie() {
      let legend = {
        // orient: "horizontal",
        bottom: '0%',
        left: '10%',
        itemGap: 5,
        formatter: function (param) {
          return param;
        },
      };
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      const options = getPie3D(this.optionData, 0.8, 190, 25, 16, 0.9, legend);
      // // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      // options.series.push({
      //   name: '货物品类占比', //自己根据场景修改
      //   backgroundColor: 'transparent',
      //   type: 'pie',
      //   label: {
      //     show: true,
      //     opacity: 1,
      //     fontSize: 13,
      //     lineHeight: 20,
      //   },
      //   startAngle: -40, // 起始角度，支持范围[0, 360]。
      //   clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
      //   radius: ['20%', '50%'],
      //   // center: ['50%', '50%'],
      //   data: this.optionData,
      //   itemStyle: {
      //     opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
      //   },
      // });

      this.optionsPie = {
        title: {
          top: '16%',
          left: '8%',
          text: '大集11月份线路货量排名',
          textStyle: {
            color: '#fff', // 文字颜色
            fontSize: 14, // 文字大小
            fontWeight: 'normal', // 文字粗细
          },
          backgroundColor: colorsB[1], // 背景色
          borderRadius: 10, // 圆角
          padding: [8, 15], // 内边距 [上下, 左右]
        },
        grid: {
          top: '40%',
          left: '17%',
          bottom: '6%',
        },
        ...options,
      };
    }
  },
};
</script>
<style lang="scss" scoped>
.chart-container {
  margin-top: 5px;
  position: relative;
  width: 100%;
  height: 50%;

  .left_center_inner,
  .bg {
    margin-left: -10px;
    width: 100%;
    height: 100%;
  }

  .left_center_inner {
    top: -35px;
    z-index: 1;
  }

  .bg {
    position: absolute;
    bottom: 68px;
    left: 51%;
    // z-index: -1;
    width: 270px;
    height: 185px;
    background: no-repeat center;
    background-image: url('../../../assets/img/launch/pie_bg.png');
    background-size: 100% 100%;
    transform: translateX(-50%);
  }
}
</style>
